<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {getVersion} from '@tauri-apps/api/app';

defineProps({
  name: {
    type: String,
    required: true,
  }
})

const appVersion = ref('');



onMounted(async () => {
  appVersion.value = await getVersion();
})

</script>

<template>
  <div class="text-2xl h-[56px] flex-shrink-0 flex flex-row items-center w-full justify-center">
    <img alt="Logo" class="h-11" src="../assets/logo.png" />
    <div class="flex flex-col select-none ml-1 line-height-tight">
      <div class="flex flex-row">
        <span class="logo">{{ name }}</span>
        <span class="version">
          {{ "v" + appVersion }}
          </span>
      </div>
      <span class="power">Powered by WengKQ</span>
    </div>
  </div>
</template>

<style scoped>
.logo {
  @apply mt-[0.1rem] select-none;
  color: black;
  font-family: 'AlimamaAgileVF-Thin', sans-serif;
  font-variation-settings: 
    "SRIF" 0,
    "slnt" 4, 
    "wdth" 100, 
    "wght" 700
}

.power {
  @apply text-gray-500 ml-0.5 mt-[-3px] text-[0.7rem];
  font-family: 'AlimamaAgileVF-Thin', sans-serif;
  font-variation-settings:
    "SRIF" 0,
    "wdth" 100, 
    "wght" 500
}

.version {
  @apply text-gray-500 ml-1 mt-1 text-[0.9rem] ;
  font-family: 'AlimamaAgileVF-Thin', sans-serif;
  font-variation-settings:
    "SRIF" 0,
    "slnt" 0,
    "wdth" 100, 
    "wght" 600
}
</style>